<template>
  <div class="riskTable-root">
    <formTitleVue title="地市监测预警统计分析"
    />
    <div class="select-ul">
      <gdAreaSelectVue
              ref="gdAreaSelect"
              class="select-li"
              v-model="areaCodeAll"
              @changeGdArea="changeGdArea"
            />
      <el-date-picker
        class="select-li"
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
      <el-select
        class="select-li"
        v-model="searchForm.type"
        @change="changeUnit"
        placeholder="请选择"
      >
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="handleExport" class="search-li" type="primary" size="mini">导出数据</el-button>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="50vh"
      border
      style="width: 100%">
      <el-table-column
        prop="month"
        label="月份">
      </el-table-column>
      <el-table-column
        prop="area_name"
        label="区域">
      </el-table-column>
      <el-table-column
        prop="type"
        label="统计类型">
      </el-table-column>
      <el-table-column
        prop="big_type"
        label="预警大类">
      </el-table-column>
      <el-table-column
        prop="sub_class"
        label="预警细类">
      </el-table-column>
      <el-table-column
        prop="level1"
        label="一级预警">
      </el-table-column>
      <el-table-column
        prop="level2"
        label="二级预警">
      </el-table-column>
      <el-table-column
        prop="level3"
        label="三级预警">
      </el-table-column>
      <el-table-column
        prop="level4"
        label="四级预警">
      </el-table-column>
      <el-table-column
        prop="total"
        label="预警总数">
      </el-table-column>
      <!--      <el-table-column
              prop="file"
              label="分析报告">
              <template slot-scope="scope">
                <el-link :href="scope.row.fileUrl" type="primary">{{scope.row.file}}</el-link>
              </template>
            </el-table-column>-->

    </el-table>
    <!-- <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      maxHeight="300px"
    >
      <template #topButtonList>
        <ButtonForm
          :buttonList="buttonList"
          @clickButton="clickButton"
        ></ButtonForm>
      </template>
    </v-table> -->
  </div>
</template>

<script>
import VTable from "@/components/VTable/index";
import ButtonForm from "@/components/ButtonForm/index";
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import {time_select_optios} from '@/utils/global.js';
import {
  riskHazardInfoStatistics,
  riskHazardInfoStatisticsExport
} from '@/api/risk/riskHazard'
import gdAreaSelectVue from "@/components/GdAreaSelect/GdAreaSelect.vue";
import {alarmListArea, alarmListAreaExport} from "@/api/alarm/statistics";

export default {
  name: "riskTable",
  components: {
    VTable,
    ButtonForm,
    formTitleVue, gdAreaSelectVue,
  },
  data() {
    return {

      tableData: [],
      loading: false,
      buttonList: [{name:'导出数据', methods:'handleExport', type:'primary'}],

      searchForm: {
        time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
        startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD"),
        endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD"),
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        placeType: '02',
        type: "1",
      },
      typeList: [
        {
          label: "综合",
          value: "1",
        },
        {
          label: "专项",
          value: "2",
        },
      ],
    };
  },
  methods: {
    changeGdArea(item) {
      // console.log(item)
      this.searchForm.provinceCode = item[0]
      this.searchForm.cityCode = item[1]
      this.searchForm.areaCode = item[1]
      this.searchForm.placeType='02'
      this.getData();
    },
    changeMonth(item) {
      console.log(item)
      this.searchForm.startTime = this.$dayjs(item).startOf("month").format("YYYY-MM-DD")+" 00:00:00"
      this.searchForm.endTime = this.$dayjs(item).endOf("month").format("YYYY-MM-DD")+" 23:59:59"
      this.getData();
    },
    changeUnit(item) {
      console.log(item)
      this.getData();
    },
    // 触发按钮区域按钮方法
    clickButton(methods) {
      this[methods]();
    },
    handleExport() {
      alarmListAreaExport(
        this.searchForm,
        `监测预警统计分析统计_${new Date().getTime()}.xlsx`
      );
    },
    getData() {
      this.loading = true;
      //this.searchForm.areaCode = this.$store.state.account.user.deptIds;
      this.searchForm.placeType = this.$commonJs.getPlaceType(this.$store.state.account.user.deptIds);


      /*this.tableData = [
        {
          month: '2023年9月',
          areaName: '广东省',
          type: '专项',
          placeType: '市政设施',
          riskLevel: '燃气泄露',
          level1: '0',
          level2: '5',
          level3: '10',
          level4: '11',
          total: '26',
          file: '报告1',
          fileUrl: 'https://wss.fala.cn/gd-city/file/api/download/79d9b2eb22f54220bc51ed9381618fab'
        },

      ]*/
      // riskHazardInfoStatistics(this.searchForm).then((res) => {
      //   this.tableData=res.data
      //   this.loading = false

      // });
      alarmListArea(this.searchForm).then(res => {
        if (res.code == 200) {
          this.tableData=res.data.data
          this.loading = false
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
  },
  mounted() {
    this.changeMonth();
  },
};
</script>

<style lang="scss" scoped>
.riskTable-root {
  .search {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    padding-top: 0;
  }

  .select-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;

    .select-li {
      width: 200px;
      margin-right: 12px;
    }
  }
}

::v-deep .table-col-select-container {
  margin-bottom: 0px;
}
</style>
